<template>
  <view class="content">
    <LfHeader title="专家问诊">
      <span @click="toMyOrder">我的</span>
    </LfHeader>
    <view class="professor-container" v-for="item in professorList" @click.stop="showDetail(item,'center')">
      <view class="flex">
        <view class="flex-cc">
          <img :src="item.headUrl" alt="">
        </view>
        <view class="item-container">
          <view class="flex-sb">
            <span>{{item.name}}</span>
            <img class="wh-24" src="../../static/right.png" alt="">
          </view>
          <view class="tags">
            <span class="tag" v-for="tag in item.tags">{{tag}}</span>
          </view>
          <view class="desc">
            {{item.description}}
          </view>
        </view>
      </view>
      <view class="btn-container">
        <button class="btn" @click.stop="showDetail(item,'bottom')">
          立即预约
        </button>
      </view>
    </view>
    <LfPopup :visible="popupVisible" @close="handlePopupClose" position="center">
      <!-- 弹窗内容 -->
      <view class="popup-container flex-cc">
        <img class="img" :src="popupInfo.headUrl" alt="">
        <span>{{popupInfo.name}}</span>
        <view class="tags">
          <span class="tag" v-for="tag in popupInfo.tags">{{tag}}</span>
        </view>
        <view class="popup-desc">
          {{popupInfo.description}}
        </view>
      </view>
    </LfPopup>
    <LfPopup :visible="popupVisible2" @close="handlePopupClose('bottom')" position="bottom">
      <!-- 弹窗内容 -->
      <view class="popup-container flex-cc">
        <view>
          <LfDate :timeList="timeList" @change="changeDate"></LfDate>
        </view>
        <view class="professor-btn flex">
          <view @click="handlePopupClose('bottom')">取消</view>
          <view :class="isOrder||!hasCount?'view-disabled':''" @click="handlePopup">{{isOrder?'已预约':'预约'}}</view>
        </view>
      </view>
    </LfPopup>
    <LfConfirmPopup title='您已经预约这个时间段了' :visible="popupVisible3" @close="handlePopupClose('confirm')" @confirm='handlePopupClose("confirm")' position="center">
    </LfConfirmPopup>
  </view>
</template>

<script>
import { getProfessorList, myOrder, setOrder, getProfessorAppointments } from '../../utils/http';

export default {
  data () {
    return {
      professorList: [],
      popupVisible: false,
      popupVisible2: false,
      popupVisible3: false,
      popupInfo: {},
      timeList: [{
        id: 1,
        time: '09:00-12:00',
        name: '上午',
        count: 0
      }, {
        id: 2,
        time: '13:00-18:00',
        name: '下午',
        count: 0
      }],
      myOrderList: [],
      professorParams: {
        professorId: '',
        userId: '',
        date: '',
        time: '',
        timeId: 1
      },
      // 是否预约
      isOrder: false,
      hasCount: true
    };
  },
  watch: {
    //监听professorParams.timeId 判断还有没有号
    'professorParams.timeId': {
      handler (newVal) {
        if (!newVal) return
        this.hasCount = this.timeList[newVal - 1].count !== 0
        console.log("🚀 ~ file: diagnose.vue:101 ~ handler ~ this.timeList[newVal - 1].count:", this.timeList[newVal - 1].count)
      },
      deep: true
    }
  },
  created () {
    this.professorParams = this.$route.query
    this.getProfessor()
    this.getMyOrder()
  },
  methods: {
    async getMyOrder () {
      const { data } = await myOrder(this.professorParams.userId)
      this.myOrderList = data
      console.log("🚀 ~ file: diagnose.vue:91 ~ getMyOrder ~ data:", data)
    },
    async getProfessor () {
      const { data } = await getProfessorList()
      data.forEach(element => {
        element.tags = JSON.parse(element.tags)
      });
      this.professorList = data
    },
    toOrder (item) {
      uni.navigateTo({
        url: '/pages/appointments/appointments?professorId=' + item.id + '&serviceLimit=' + item.serviceLimit + '&userId=' + this.$route.query.userId
      })
    },
    toMyOrder () {
      uni.navigateTo({
        url: '/pages/diagnose/myOrder?userId=' + this.$route.query.userId
      })
    },
    async getOrderCount () {
      this.timeList[0].count = this.professorParams.serviceLimit
      this.timeList[1].count = this.professorParams.serviceLimit
      const { data } = await getProfessorAppointments(this.professorParams)
      data.forEach(item => {
        if (item.timeId == 1) {
          this.timeList[0].count--
        } else {
          this.timeList[1].count--
        }
      })
      console.log("🚀 ~ file: diagnose.vue:123 ~ getOrderCount ~ data:", data)
    },
    showDetail (item, position) {
      console.log("🚀 ~ file: diagnose.vue:126 ~ showDetail ~ item:", item)
      if (position == 'bottom') {
        this.popupVisible2 = true
        this.professorParams.professorId = item.id
        this.professorParams.serviceLimit = item.serviceLimit
      } else {
        this.popupInfo = item
        this.popupVisible = true
      }
    },
    getIsOrder () {
      const { professorId, date, timeId } = this.professorParams
      // 判断this.myOrderList里面的date和timeId是不是有一致的
      if (this.myOrderList.length > 0) {
        const index = this.myOrderList.findIndex(item => item.professorId == professorId && item.date == date && item.timeId == timeId)
        if (index != -1) {
          this.isOrder = true
        } else {
          this.isOrder = false
        }
        console.log("🚀 ~ file: diagnose.vue:139 ~ changeDate ~ this.isOrder:", this.isOrder)
      }
    },
    changeDate (e) {
      console.log("🚀 ~ file: diagnose.vue:98 ~ changeDate ~ e:", e, this.myOrderList)
      this.professorParams = { ...this.professorParams, ...e }
      this.getOrderCount()
      this.getIsOrder()
    },
    async handlePopup () {
      const { data } = await setOrder(this.professorParams)
      this.getMyOrder()
      this.popupVisible2 = false
    },
    handlePopupClose (position) {
      if (position == 'bottom') return this.popupVisible2 = false
      if (position == 'confirm') return this.popupVisible3 = false
      this.popupVisible = false
    }
  }
}
</script>

<style lang="scss">
.professor-container {
  background-color: #fff;
  margin: 0 15px;
  margin-top: 10px;
  display: flex;
  padding: 10px 15px;
  flex-direction: column;
  border-radius: 10px;
  .item-container {
    margin-left: 10px;
    flex: 1;

    // 超出两行隐藏显示省略号
    .desc {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #9b959b;
    }
  }
  .btn {
    border-radius: 22px;
    background: #d7ae3c;
    margin-top: 10px;
    color: #fff;
  }
}
.popup-container {
  flex-direction: column;
  span {
    margin: 10px 0;
  }
  .popup-desc {
    color: #9b959b;
    margin: 10px 0 30px 0;
  }
}
img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.tags {
  margin: 10px 0;
  .tag {
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 5px;
    &:nth-child(1) {
      border: 1px solid #17e62b;
      color: #17e62b;
    }
    &:nth-child(2) {
      border: 1px solid #007aff;
      color: #007aff;
    }
    &:nth-child(3) {
      border: 1px solid #ffa63e;
      color: #ffa63e;
    }
  }
}
.professor-btn {
  margin: 5px 0 34px 0;
  width: 100%;
  border-top: 1px solid #dacfb9;
  view {
    width: 50%;
    text-align: center;
    color: #d7ae3c;
    margin-top: 10px;
  }
  .view-disabled {
    opacity: 0.5; /* 降低不透明度以表示禁用状态 */
    pointer-events: none; /* 禁止视图上的交互事件 */
    /* 其他样式属性，如背景色、文本颜色等 */
  }
}
</style>
